<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Athenaeum : Create a Team</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jsp:include page="../../assets/header.jsp" />

</head>
<body>
	<jsp:include page="../../assets/navbar-top.jsp" />
	<div class="page-wrap">
		<div class="container-fluid">
			<div class="row row-wrap">
				<div class="col-md-10 col-md-offset-1">
					<div class="row">
						<ol class="breadcrumb">
							<li><i class="fa fa-home"></i> <a href="<c:url value="/" />">Home</a></li>
							<li><i class="fa fa-cogs"></i> <a
								href="<c:url value="/settings/organizations" /> ">Settings</a></li>
							<li><i class="fa fa-umbrella"></i> <a
								href="<c:url value="/account/organization/${organizationid}/edit" />">Organization</a></li>
							<li><i class="fa fa-sitemap"></i> <a
								href="<c:url value="/account/organization/${organizationid}/department/${departmentid}/edit" />">Department</a>
							</li>
							<li><i class="fa fa-suitcase"></i> <a
								href="<c:url value="/account/organization/${organizationid}/department/${departmentid}/project/${projectid}/edit" />">Project</a>
							</li>
							<li class="active"><i class="fa fa-group"></i> Team</li>
						</ol>
					</div>
					<div class="row">
						<h1>Create a team</h1>
						<ol class="steps">
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up a personal account</li>
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up the organization</li>
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up the departments</li>
							<li class="complete"><i class="fa fa-check fa-2x"></i> <strong
								class="step">Completed</strong> Set up a project</li>
							<li class="current"><i class="fa fa-group fa-2x"></i> <strong
								class="step">Step 5:</strong> Invite team members</li>
						</ol>
					</div>
					<div class="row row-wrap">
						<h4>Set up a team</h4>
						<div class="col-md-8">
							<c:url
								value="/account/organization/${organizationid}/department/${departmentid}/project/${projectid}/user/save"
								var="action" />
							<form:form modelAttribute="usergroup" action="${action}"
								method="post" role="form" class="form-horizontal">
								<div class="form-group">
									<div class="col-md-10">
										<form:select class="selectpicker" path="users"
											items="${allusers}" multiple="true"
											data-selected-text-format="count" data-width="99%">
										</form:select>
										<form:errors path="users" cssClass="error" />
									</div>
									<div class="col-md-2">
										<button type="submit" class="btn btn-primary">Add
											User</button>
									</div>
								</div>

							</form:form>
						</div>
						<div class="col-md-4"></div>
					</div>
					<div class="row row-wrap"></div>
					<c:if test="${not empty projectusers}">
						<div class="row row-wrap">
							<div class="panel panel-default">
								<div class="panel-heading">
									<h3 class="panel-title">Team</h3>
								</div>
								<div class="panel-body">
									<table class="table table-striped" id="projectusers"
										style="width: '100%'">
										<thead>
											<tr>
												<th>ID</th>
												<th>First name</th>
												<th>Last name</th>
												<th>Actions</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach var="user" items="${projectusers}">
												<tr>
													<td><a
														href="<c:url value="/profile/${navigationUser.id}" />">${user.id}</a></td>
													<td>${user.firstName}</td>
													<td>${user.lastName}</td>
													<td><a
														href="<c:url value="/account/organization/${organizationid}/department/${departmentid}/project/${projectid}/user/${user.id}/delete" />">Delete</a></td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</c:if>
					<div class="row row-wrap"></div>
				</div>
			</div>
		</div>
	</div>
	<jsp:include page="../../assets/footer.jsp" />
	<script type="text/javascript">
		$(document).ready(function() {
			$('#projectusers').dataTable({
				"bLengthChange" : false,
			});

			$('.selectpicker').selectpicker();
		});
	</script>
</body>
</html>

